<template>
  <div class="comment-container">
    <!-- 标题区域 -->
    <div class="comment-title">
      <h1>留言列表</h1>
      <el-button type="primary" @click="openCommentDialog(1)">点我留言</el-button>
    </div>

    <!-- 评论列表区域 -->
    <div
        v-if="commentList.length > 0"
        v-for="(item,index) in commentList"
        :key="'comment_'+index"
    >
      <!-- 评论头像 -->
      <el-image :src="item.avatarUrl ? item.avatarUrl : avatar" class="comment-avatar"/>
      <!-- 评论主体区域 -->
      <div class="comment-main">
        <span class="comment-nickname">
            {{item.nickname}}
        </span>
        <div>
          <span class="comment-create-time">{{item.createTime}}</span>
          <span class="comment-reply-button" @click="openCommentDialog(2,item.commentId,item.userId)">回复</span>
        </div>
        <div>
          <div v-html="item.content"/>
        </div>

        <!-- 回复区域 -->
        <div
            v-for="(reply,replyIndex) in item.replyList"
            :key="'reply_'+replyIndex"
            class="comment-reply">
          <!-- 评论头像 -->
          <el-image :src="reply.avatarUrl ? reply.avatarUrl : avatar" class="comment-avatar"/>
          <!-- 评论主体区域 -->
          <div class="comment-main">
            <span class="comment-nickname">
              {{reply.nickname}}<span style="color: rebeccapurple"> 回复 </span>{{reply.replyNickname}}
            </span>
            <div>
              <span class="comment-create-time">{{reply.createTime}}</span>
              <span class="comment-reply-button" @click="openCommentDialog(2,item.commentId,reply.userId)">回复</span>
            </div>
            <div>
              <div v-html="reply.content"/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <h3>0 评论</h3>
    </div>
    <!-- 弹窗 -->
    <el-dialog
        draggable
        v-model="commentDialog"
        :title="commentTitle"
        width="30%"
    >
      <div class="comment-input">
        <my-wang-editor ref="myWangEditorRef" :height="150" @changContentHtml="changContentHtml"></my-wang-editor>
      </div>
      <div>
        <el-button type="info" @click="cancelInput">取消</el-button>
        <el-button type="primary" @click="submitComment">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,inject } from "vue";
import avatar from  '@/assets/images/avatar/avatar.gif';
import MyWangEditor from "@/components/WangEditor/MyWangEditor";
import { treeCommentApi, addCommentApi } from "@/api/comment";
import { getToken } from "@/utils/auth";
import { ElMessage } from 'element-plus';
import store from "@/store";
// 刷新页面
const reload = inject('reload');
// 此方法用来调用父组件方法
const emit = defineEmits([ "changCommentNum" ]);

const props = defineProps({
  // 文章id 0代表本站
  articleId:{
    type:Number,
    required:true,
    default:0
  }
})

// 初始化评论列表
getTreeCommentList();

// 评论列表
const commentList = ref([]);

// 编辑器
const myWangEditorRef = ref(null);

// 评论弹窗
const commentDialog = ref(false);
// 评论弹窗标题
const commentTitle = ref('');

// 评论表单
let commentForm = ref({
  // 评论内容
  content:'',
  // 评论父ID
  pid:0,
  // 文章ID
  articleId:props.articleId,
  // 回复的用户ID
  replyUserId:undefined
})

/** 获取树形评论 */
function getTreeCommentList(){
  treeCommentApi(props.articleId).then(res=>{
    console.log(res);
    if(res.code === 200){
      commentList.value = res.data;
    }
  });
}

// 打开弹窗
function openCommentDialog(type,commentPid,replyUserId){
  // 如果是留言
  if(type === 1){
    commentTitle.value = '欢迎留言';
    commentForm.value.pid = 0;
    commentForm.value.replyUserId = undefined;
  }
  if(type === 2){
    commentTitle.value = '留言回复';
    commentForm.value.pid = commentPid;
    commentForm.value.replyUserId = replyUserId;
  }
  commentDialog.value = true;
  if(myWangEditorRef.value){
    myWangEditorRef.value.clearHtml();
  }
}

// 取消输入
function cancelInput(){
  if(myWangEditorRef.value){
    myWangEditorRef.value.clearHtml();
  }
  commentDialog.value = false;
}

// 内容改变时
function changContentHtml(contentHtml){
  commentForm.value.content = contentHtml;
}

/** 提交评论 */
function submitComment(){
  if(getToken()){
    addCommentApi(commentForm.value).then(async res=>{
      if(res.code === 200){
        commentDialog.value = false;
        await getTreeCommentList();
        await emit('changCommentNum');
        await store.dispatch('updateStationInfo');
        await reload();
      }
    })
  }else {
    ElMessage({
      message: '请先登录',
      type: 'error',
    })
  }
}
</script>

<style scoped>
@import 'comment.css';
:deep(.el-dialog){
  border-radius: 20px;
}
</style>
